$(() => {
    // 从本地存储中取出数据
    var arr = JSON.parse(localStorage.getItem("shoppingCart")) || [];

    if (arr.length === 0) {
        $(".container").html(`<img src='/imgs/gouwuche.jpg'>`)
        return ;
    }
    // 循环将arr中的每一条数据添加到tbody中
    let $tbody = $("tbody");
    let $count = $(".count span:last-child");
    render();
    // 封装函数渲染页面
    function render() {
        // 先清空
        $tbody.empty();
        arr.forEach(value => {
            var str = `
                        <tr>
                            <td><input data-id="${value.goods_id}"  type="checkbox"></td>
                            <td><img src="${value.goods_small_logo}" alt=""></td>
                            <td>${value.num}</td>
                            <td>¥${value.goods_price}</td>
                            <td>${value.goods_name}</td>
                            <td><!-- Single button -->
                                <div class="btn-group">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    操作 <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu">
                                    <li data-id="${value.goods_id}" class="increase"><a>+</a></li>
                                    <li data-id="${value.goods_id}" class="decrease"><a>-</a></li> 
                                    <li data-id="${value.goods_id}" class="del"><a>删除</a></li> 
                                  </ul>
                                </div></td>
                        </tr>
                        `;
            $tbody.append(str);
        })
    }
    // 封装函数计算总价
    function countAll() {
        // 从数组中获取所有具备isChecked属性且为true的
        var zongjia = arr.filter(value => value.isChecked).reduce((prev, value) => prev + value.goods_price * value.num, 0);
        $count.html(zongjia);
    }

    // 获取所有tbody中的input
    let $allInput = $("tbody input");

    // 获取全选按钮
    let $allCheck = $("thead input");
    // 添加change事件
    $allCheck.change(function () {
        // 获取当前input是否被勾选(想要获取input的checked属性要使用prop方法)
        let isAllCheck = $(this).prop("checked");

        $allInput.prop("checked", isAllCheck);
        // 将数组中的每一个也添加isChecked
        arr.forEach(value => value.isChecked = isAllCheck);

        // 计算总价
        countAll();
    })


    $allInput.change(function () {
        // 获取data-id属性的值 
        let id = $(this).data("id");
        // 获取当前input的勾选状态
        let isChecked = $(this).prop("checked");
        // 获取对应的数组中的数据
        let obj = arr.find(value => +value.goods_id === id);
        obj.isChecked = isChecked;

        // 判断是否每一个单选都选中 然后操作全选状态
        // 我们不要判断每一个单选按钮的元素的状态 而应该判断数组中的每一条数据的状态
        $allCheck.prop("checked", arr.every(value => value.isChecked));
        // 计算总价
        countAll();
    })


    // 委托模式添加操作行为(增加 减少 移除)
    $tbody.on("click", ".increase", function () {
        // 获取id
        let id = $(this).data("id");
        // 获取对应的数组中的数据
        let obj = arr.find(value => +value.goods_id === id);
        // 数据中的数量+1
        obj.num++;
        // 页面中的数量+1
        $(this).parents("td").prev().prev().prev().html(obj.num);
        // 保存新的数据到本地存储中
        localStorage.setItem("shoppingCart", JSON.stringify(arr));
        // 计算总价
        countAll();
    })


    $tbody.on("click", ".decrease", function () {
        let id = $(this).data("id");
        // 获取对应的数组中的数据
        let obj = arr.find(value => +value.goods_id === id);
        // 数据中的数量-1
        obj.num--;
        if (obj.num === 0) {
            obj.num = 1;
            Dreamer.warning("至少选择一件");
            return;
        }
        // 页面中的数量-1
        $(this).parents("td").prev().prev().prev().html(obj.num);
        // 保存新的数据到本地存储中
        localStorage.setItem("shoppingCart", JSON.stringify(arr));
        // 计算总价
        countAll();
    })

    $tbody.on("click", ".del", function () {
        let id = $(this).data("id");
        // 获取对应的数组中的数据
        let idx = arr.findIndex(value => +value.goods_id === id);
        // 从数组中删除
        arr.splice(idx, 1);
        // 移除页面中的元素
        $(this).parents("tr").remove();
        // 保存新的数据到本地存储中
        localStorage.setItem("shoppingCart", JSON.stringify(arr));
        // 计算总价
        countAll();
    })
})